<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500" style="border: 1px solid red;">
    	
    </canvas>
    
</body>
<script type="text/javascript">
	function composite(){
//		alert(1);
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		
		context.fillStyle = "#663311";
		context.fillRect(50,50,200,200);
		
		context.globalCompositeOperation = "source-in";
		
		context.fillStyle = "black";
		context.fillRect(150,150,200,200);
		
	}
	
	window.addEventListener("load",composite,true);
</script>

</html>